<template>
  <div class="annularChart" :id="id"></div>
</template>
<script>
  import * as echarts from 'echarts'
  export default {
    props: ["id", "title", "bar", "data","color"],
    data() {
      return {
        arr: []
      };
    },
    methods: {
      getAnnular() {
        let charts = echarts.init(document.querySelector(`#${this.id}`));
        charts.setOption({
          title: {
            left: 'center',
            textStyle:{
               color:"#1f2e4c",
               fontSize:"14"
            },
          },
          color:this.color, //设置图形的颜色
          tooltip: {
            trigger: 'item',
            // {a} <br/>{b}: {c} ({d}%)
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: 10,
            data: this.bar
          },
          series: [{
            name:'none',
            type: 'pie',
            // radius:"50%",
            // radius: ['50%', '70%'],
            // center: ["50%", "40%"],
            legendHoverLink: true,
            hoverAnimation: true,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 13,
            //     fontWeight: 'bold'
            //   }
            // },
            // label: {
            //   normal: {
            //     // {b|{b}}
            //     formatter: '{b}:{c}', //{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。
            //     padding: [0, -30],
            //     rich: {
            //       a: {
            //         color: '#1f2e4c',
            //         fontSize: 13,
            //       },
            //       b: {
            //         fontSize: 13,
            //         color: '#1f2e4c'
            //       }
            //     }
            //   }
            // },
            // labelLine: { //设置线的平滑
            //   normal: {
            //     length: 6,
            //     smooth: 1
            //   }

            // },
            // itemStyle: {
            //   normal: {
            //     label: {
            //       textStyle: {
            //         color: "#1f2e4c",
            //         fontSize: "13"
            //       },
            //     }
            //   }

            // },
            data: this.arr
          }]
        });
        window.addEventListener("resize", function() {
          charts.resize();
        });
      }
    },
    mounted() {
      this.getAnnular();
    },
    created() { //data和bar在这里循环，生成渲染所需要的对象
      this.bar.forEach((val, i) => {
        this.data.forEach((item, index) => {
          if (i == index) {
            this.arr.push({
              value: item,
              name: val
            });
          }
        });
      });
    }
  };
</script>
<style scoped>
  .annularChart {
    width:100%;
    height:315px;
    margin:0 auto;
    background-color: #fff;
    transform: scale(.9);
  }
</style>
